<template>
	<view class="card">
		<view class="title absolute">
			<text>适用人群</text>
		</view>
		
		<view class="list mt-30 mb-20 d-flex">
			<view v-for="item of list" :key="item.id" :class="['list_item d-flex', item.id % 3 !== 0 ? 'mr-30' : '', [7, 8].includes(item.id) ? '' : 'mb-70']">
				<image mode="widthFix" class="list_item_icon mb-30" :src="`/static/image/share/avatar${item.id}.svg`"></image>
				<text class="list_item_title">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	
	const list = reactive([
		{
			id: 1,
			title: '婚恋从业人员'
		},
		{
			id: 2,
			title: '助贷从业人员'
		},
		{
			id: 3,
			title: '家政从业人员'
		},
		{
			id: 4,
			title: '自由职业者'
		},
		{
			id: 5,
			title: '人力资源从业者'
		},
		{
			id: 6,
			title: '二手交易从业者'
		},
		{
			id: 7,
			title: '租赁从业人员'
		},
		{
			id: 8,
			title: '其他个人或团队'
		}
	])
</script>

<style scoped lang="scss">
.card {
	.list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		
		&_item {
			align-items: center;
			justify-content: center;
			width: calc(100% / 3 - 20rpx);
			flex-direction: column;
			
			&_icon {
				width: 140rpx;
			}
			
			&_title {
				font: {
					size: 28rpx;
				}
			}
		}
	}
}
</style>
